<template>
  <div class="record">
    <!-- <commonView /> -->
    <div>
      <a>用户名:</a><input
        v-model="username"
        class="username_case"
      >
    </div>
    <div>
      <a>密码:</a><input
        v-model="password"
        type="password"
        class="password_case"
      >
    </div>
    <button @click="login">
      <a class="logon">登陆</a>
    </button> <br>
    <button @click="regist">
      <a class="rego">注册</a>
    </button>
    <registView
      :visible.sync="visible"
    />
  </div>
</template>

<script>
import { mapActions } from 'vuex';

// eslint-disable-next-line import/no-cycle
import { userLogin } from '@/api/user';
import { setLocal } from '@/utils/utils';
// import { mapMutations } from 'vuex';
// import { userLogin } from '@/api/user';
// import { setLocal } from '@/utils/utils';
// import { mapActions } from 'vuex';
import { encode } from '@/common/utils';
// import commonView from '@/components/LanguageChange/commonView.vue';
import registView from '../regist/registView.vue';

export default {
  components: {
    registView,
    // commonView,
  },
  data() {
    return {
      visible: false,
      username: '',
      password: '',
    };
  },
  methods: {
    ...mapActions(['userLogin']),
    async login() {
      // await encode(this.username, this.password);
      // ? 可能会多次复用的登录态
      try {
        console.log(21);
        const result = await userLogin(
          {
            username: this.username,
            password: this.password,
          },
        );
        this.saveUser({
          user: result.user,
        });
        setLocal('user', result.user);
        this.$router.push('./admin');
      } catch (error) {
        console.log(error);
      }
      // login() {
      //   this.userLogin({
      //     username: this.username,
      //     password: this.password,
      //   });
      // }
      // },
      const result = await this.userLogin({
        username: encode(this.username),
        password: encode(this.password),
      });
      console.log(result);
    },
    regist() {
      this.visible = true;
    },
  },
};
</script>

<style scoped>
.record{
    /* background-color: aquamarine; */
    /* height: 100vh; */
    /* margin: 0 auto; */
    line-height: 40px;
    margin-top: 300px;
    text-align: center;
    vertical-align: middle;
}
.record a{
    font-size: 25px;
    font-weight: 400;
}
.record .logon{
    font-size: 18px;
}
.record button{
    border: none;
    /* border: 1px solid rgb(0, 0, 0); */
    background-color: rgb(0, 0, 0);
    padding: 1px 120px;
    margin-top: 25px;
    border-radius: 15px;
    cursor: pointer;
}
.record button a{
    color: white;
}
.record .rego{
    font-size: 18px;
}
.record .username_case{
    width: 280px;
    height: 30px;
    margin-left: 40px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 2px solid black;
    outline:medium;
    text-align:center
}
.record .password_case{
    width: 280px;
    height: 30px;
    margin-left: 63px;
    border: none;
    border-bottom: 2px solid black;
    outline:medium;
    text-align:center
}
</style>
